<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>离线缓存设备档案管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .mui-checkbox input[type=checkbox].checkbox{
       position: relative;
        top: 0;
        right: 0;
      }
      .footer{
        position: fixed;
        width: 100%;
        z-index: 9999;
        height: 44px;
        line-height: 44px;
        background-color: #fff;
        bottom: 0;
        padding: 0;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">离线缓存设备档案</h1>
        <a class="mui-pull-right iconfont icon-bianji mui-right-icon" @click="edit()"> {{editShow?"完成":"编辑"}}</a>
      </header>
      <div class="footer flex shadow" v-if="editShow">
        <div class="flex-sub" @click="chooseAll">{{all?"取消全选":"全选"}}</div>
        <div class="flex-sub bg-red text-white" @click="Delete()">
          清除缓存
        </div>
      </div>
      <div class="mui-content app-container" style="background-color: #fff;">
        <div id="slider" class="mui-slider mui-fullscreen" style="background-color: #fff;">
          <!-- <div class="tab-wrap"> -->
          <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
            style="text-align: left;">
            <a class="mui-control-item mui-active" href="#item1"><span class="txt">默认</span></a>
            <a class="mui-control-item" href="#item2"><span class="txt">待上传</span></a>
            <!-- <span class="all">全部 ></span> -->
          </div>
          <!-- </div> -->
          <div class="tab-content mui-slider-group" id="tab-content" >
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <div id="item1-scroll">
                <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                  <div class="mui-scroll">
                    <ul class="mui-table-view commonList">
                      <!-- <li class="flex justify-between align-center" >
                        
                        <div class="mui-table-cell flex-sub mui-ellipsis" style="padding-left: 6px;" @click="detail(item)">
                          <p class="text-grey text-sm mui-ellipsis">数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更数据变更 </p>
                          <p class="text-block text-df mui-ellipsis">数据变更数据变更数据变更数据变更数据变更数据变更 <span class="padding-left-xs">数据变更</span></p>
                        </div>
                        <div class="tag-sm bg-red text-white text-sm round">
                           <span>数据变更</span>
                         </div>
                      </li> -->
                      <p class="padding-tb text-df text-grey text-center" v-if="list.length===0">暂无数据</p>
                      <li class="flex justify-between align-center" v-for="item in list" v-if="item.mdmMainFlag=='true'">
                        <div class="mui-checkbox" v-show="editShow">
                          <input name="checkbox" :value="item.id" type="checkbox" class="checkbox" v-model="checkModel"
                            @change="checkChange()">
                        </div>
                        <div class="mui-table-cell flex-sub mui-ellipsis" style="padding-left: 6px;" @click="detail(item)">
                          <p class="text-grey text-sm mui-ellipsis"><span v-if="!item.isComplete"style="color: #FF0000;">(未完成)</span>{{item.deviceName}} </p>
                          <p class="text-block text-df mui-ellipsis">{{item.mdmCode}} <span class="padding-left-xs">{{item.stationNames}}</span></p>
                        </div>
                        <div class="tag-sm bg-red text-white text-sm round" v-if="item.isEdit===1">
                           <span>数据变更</span>
                         </div>
                      </li>
                    </ul>
                    <div style="height: 50px;"v-if="editShow">
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="item2" class="mui-slider-item mui-control-content">
              <div id="item2-scroll">
                <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                  <div class="mui-scroll">
                    <ul class="mui-table-view commonList">

                      <p class="padding-tb text-df text-grey text-center" v-if="waitList.length===0">暂无数据</p>
                      <li class="flex justify-between align-center" v-for="item in waitList">
                        <div class="mui-checkbox" v-show="editShow">
                          <input name="checkbox" :value="item.id" type="checkbox" class="checkbox" v-model="checkModel"
                            @change="checkChange()">
                        </div>
                        <div class="mui-table-cell flex-sub mui-ellipsis" style="padding-left: 6px;" @click="detail(item)">
                          <p class="text-grey text-sm mui-ellipsis">{{item.deviceName}} </p>
                          <p class="text-block text-df mui-ellipsis">{{item.mdmCode}} <span class="padding-left-xs">{{item.stationNames}}</span></p>
                        </div>
                        <div class="tag-sm bg-red text-white text-sm round" v-if="item.isEdit===1">
                           <span>数据变更</span>
                         </div>
                      </li>
                    </ul>
                    <div style="height: 50px;"v-if="editShow"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/mkeyplus.base.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
      var wait = null;
      var databaseName = "fileTable"; //定义表的名字
      var offlineData = "offlineFiles"; //定义表的名字
      var bdName = "files"; //数据库的名字
      mui.plusReady(function() {
        if (!validBdOpen(bdName)) {
          createDb(bdName)
        }
        console.log(selectName)
        select()
      })
      wait = new Vue({
        el: '#container',
        data: {
          height1: 0, // 列表高度
          editShow: false,
          list: [],
          waitList: [],
          checkModel: [],
          all: false
        },
        created: function() {
          this.initHeight()
        },
        methods: {
          // 设置高度
          initHeight: function() {
            var height = window.innerHeight - 95;
            this.height1 = height;
          },
          detail: function(item) {
            mui.openWindow({
              url: '../help/filesDetail.html',
              id: '../help/filesDetail.html',
              createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
              extras: {
                pageId: item.id
              }
            })
          },
          edit() {
            this.editShow = !this.editShow
            this.checkModel = []
          },
          checkChange() {
            var that = this;
            console.log(that.checkModel)
            var ids = []
            that.list.forEach(function(item, index) {
              ids.push(item.id);
            })
            if (that.checkModel.sort().toString() === ids.sort().toString()) {
              that.all = true
            } else {
              that.all = false
            }
          },
          chooseAll() {
            var that = this;
            if (!that.all) {
              that.list.forEach(function(item, index) {
                that.checkModel.push(item.id);
              })
            } else {
              that.checkModel = []
            }
            that.all = !that.all;
          },
          Delete() {
            var that = this;
            var btnArray = ['取消', '确定'];
            mui.confirm('确定删除吗？', '提示', btnArray, function(e) {
              if (e.index == 1) {
                that.checkModel.forEach((item, index1) => {
                  selectListSQL(bdName, "delete from offlineFiles WHERE mainId ='" + item + "'", function(data) {
                    console.log(data.length)
                    select()
                  });
                })
              } else {

              }
            })
          }
        }
      })

      function select() {
        selectListSQL(bdName, "select "+ selectName +" from " + offlineData + " WHERE mdmMainFlag ='true'" ,
          function(data) {
            console.log('查出数据表数据' + data.length);
            wait.list=[];
            wait.waitList=[];
            if (data.length > 0) {
              wait.list = data.filter(element => element.mdmMainFlag=='true');
              wait.waitList = wait.list.filter(element => element.isEdit==1);
             
              // console.log(JSON.stringify(data[0]))
            }
          })
      }
      window.addEventListener("update", function(e) {
        console.log('更新离线数据')
        select();
      });
      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration
        });

      })(mui);
      document.getElementById('slider').addEventListener('slide', function(e) {
        wait.editShow=false
      });
    </script>
  </body>

</html>
